<template>
  <div class="advantage">
    <div>
      <p class="title">{{currentItem.label}}</p>
      <p class="tc">总量：
        <!-- 0植物 3 动物 保留小数点位数 -->
        <span v-if="type === '1'">
          {{$toFixed(currentItem[currentItem.tag], 0)}}
        </span>
        <span v-else>
          {{$toFixed(currentItem[currentItem.tag], 3)}}
        </span>
      </p>
    </div>
    <div v-for="(item, index) in adList" :key="index" class="mb10 pr20">
      <div class="dialog-info">
        <p>第{{index + 1}}种优势：</p>
        <p><span class="em">{{item.column}}</span>： {{item.column_value}}</p>
      </div>
      <el-carousel trigger="click" height="160px" v-if="item.picture && item.picture.length > 0" >
        <el-carousel-item v-for="(img, index1) in item.picture" :key="index1">
                <el-image
                  class="img"
                  :src="img.source"
                  fit="contain"></el-image>
          <!-- <img class="img" :src="img.source" alt=""> -->
        </el-carousel-item>
      </el-carousel>
      <p v-else>暂无图片</p>
    </div>
  </div>
</template>

<script>
import { dataDetailQuery, dataDetailQueryZoo } from '@/api/water'

export default {
  props: {
    currentItem: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: '1' // 1植物 2 动物
    }
  },
  data () {
    return {
      adList: []
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      if (this.type === '1') {
        dataDetailQuery({
          time: this.currentItem.time,
          tag: this.currentItem.tag
        }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.list) {
              this.adList = res.data.list
            } else {
              this.adList = []
            }
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }).catch((err) => {
          this.$message({
            type: 'error',
            message: '获取数据失败！'
          })
        })
      } else {
        dataDetailQueryZoo({
          time: this.currentItem.time,
          tag: this.currentItem.tag
        }).then(res => {
          if (res.code === 200) {
            if (res.data && res.data.list) {
              this.adList = res.data.list
            } else {
              this.adList = []
            }
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }).catch((err) => {
          this.$message({
            type: 'error',
            message: '获取数据失败！'
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.advantage {
  max-height: 60vh;
  overflow-y: auto;
  .img {
    width: 100%;
    height: 150px;
  }
  .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }
}
</style>
